<script setup lang="tsx">
import { NButton, NTag } from "naive-ui";
import { h, ref } from "vue";
import { useAuth } from "@/hooks/business/auth";
import { useTable, useTableOperate } from "@/hooks/common/table";
import { $t } from "@/locales";
import { useAppStore } from "@/store/modules/app";
import { DICT_TYPE, getDictObj } from "@/utils/dict";
import SvgIcon from "@/components/custom/svg-icon.vue";
import {
  type UserNotice,
  fetchNoticeDetail,
  fetchMyNoticePage,
  Notice,
} from "@/service/api";
import { useBoolean } from "~/packages/hooks/src";
import NoticeDetailModal from "../manage/notice/modules/notice-detail-modal.vue";
import NoticeSearch from "./modules/my-notice-search.vue";

const appStore = useAppStore();
const { hasAuth } = useAuth();

const rowDataNotice = ref<Notice>();

const { bool: noticeDetailVisible, setTrue: openNoticeDetailModal } =
  useBoolean();

const {
  columns,
  data,
  loading,
  mobilePagination,
  getData,
  getDataByPage,
  searchParams,
  resetSearchParams,
} = useTable({
  apiFn: fetchMyNoticePage,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    publishStatus: null,
    title: null,
    publishTime: null,
    isRead: null,
  },
  columns: () => [
    {
      key: "index",
      title: $t("common.index"),
      align: "center",
      width: 30,
    },
    {
      key: "title",
      title: $t("page.manage.notice.noticeTitle"),
      align: "left",
      width: 300,
      ellipsis: {
        tooltip: true,
      },
    },
    {
      key: "type",
      title: $t("page.manage.notice.type"),
      align: "center",
      width: 80,
      ellipsis: {
        tooltip: true,
      },
      render: (row) => {
        if (row.type === null) {
          return "~";
        }
        const dictObj = getDictObj(DICT_TYPE.SYSTEM_NOTICE_TYPE, row.type);

        return <NTag type={dictObj?.colorType}>{dictObj?.label}</NTag>;
      },
    },
    {
      key: "publisherName",
      title: $t("page.manage.notice.publisherName"),
      align: "center",
      width: 150,
      ellipsis: {
        tooltip: true,
      },
    },
    {
      key: "level",
      title: $t("page.manage.notice.level"),
      align: "center",
      width: 100,
      ellipsis: {
        tooltip: true,
      },
      render: (row) => {
        if (row.status === null) {
          return null;
        }
        const dictObj = getDictObj(DICT_TYPE.SYSTEM_NOTICE_LEVEL, row.level);

        return <NTag type={dictObj?.colorType}>{dictObj?.label}</NTag>;
      },
    },
    {
      key: "publishTime",
      title: $t("page.manage.notice.publishTime"),
      align: "center",
      width: 150,
      ellipsis: {
        tooltip: true,
      },
    },
    {
      key: "isRead",
      title: $t("page.manage.notice.readStatus"),
      align: "center",
      width: 100,
      ellipsis: {
        tooltip: true,
      },
      render: (row) => {
        if (row.isRead?.toString() === "1") {
          return <NTag type="success">{$t("page.manage.notice.isRead")}</NTag>;
        } else {
          return <NTag type="info">{$t("page.manage.notice.unRead")}</NTag>;
        }
      },
    },
    {
      key: "operate",
      title: $t("common.operate"),
      align: "center",
      fixed: "right",
      width: 80,
      render: (row) => (
        <div class="flex-center gap-8px">
          <div v-show={hasAuth("system:notice:query")}>
            <NButton
              type="primary"
              ghost
              size="small"
              onClick={() => handleNoticeDetail(row)}
            >
              {{
                default: () => $t("common.look"),
                icon: () => h(SvgIcon, { icon: "ant-design:eye-outlined" }),
              }}
            </NButton>
          </div>
        </div>
      ),
    },
  ],
});

const { checkedRowKeys } = useTableOperate(data, getData);

async function handleNoticeDetail(row: UserNotice) {
  const { error, data: noticeDetail } = await fetchNoticeDetail(row.id);
  if (!error) {
    rowDataNotice.value = noticeDetail;
    openNoticeDetailModal();
  } else {
    window.$message?.error($t("common.noData"));
  }
}
</script>

<template>
  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NoticeSearch
      v-if="hasAuth('system:notice:query')"
      v-model:model="searchParams"
      @reset="resetSearchParams"
      @search="getDataByPage"
    />

    <NCard
      :title="$t('page.manage.notice.myNotice.title')"
      :bordered="false"
      size="small"
      class="sm:flex-1-hidden card-wrapper"
    >
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="2088"
        :loading="loading"
        :row-key="(row) => row.id"
        remote
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>

    <NoticeDetailModal
      v-model:visible="noticeDetailVisible"
      :row-data="rowDataNotice"
    />
  </div>
</template>

<style scoped></style>
